import { FC } from "react";
import {
  QuestionCheckboxDefaultProps,
  QuestionCheckboxPropsType,
} from "./interface";

import { Checkbox, Space, Typography } from "antd";

const { Paragraph } = Typography;
export const Component: FC<QuestionCheckboxPropsType> = (
  props: QuestionCheckboxPropsType
) => {
  const {
    isVetical,
    title,
    options = [],
  } = {
    ...QuestionCheckboxDefaultProps,
    ...props,
  };
  return (
    <>
      <Paragraph strong>{title}</Paragraph>
      <div>
        <Space direction={isVetical ? "vertical" : "horizontal"} wrap>
          {options.map((item) => (
            <Checkbox
              value={item.value}
              key={item.value}
              checked={item.checked}
            >
              {item.text}
            </Checkbox>
          ))}
        </Space>
      </div>
    </>
  );
};
